<template>
  <div class="create_pg_div">
    <!--  <h3>保护组配置</h3>-->
<!--    <el-header style="background-color: #ffffff;font-weight: 700;color: #74b2f8;font-size: 20px">保护组配置</el-header>-->
    <el-form :model="pg" :rules="rules" ref="pgForm" label-width="80px" class="config_form">
      <el-form-item label="保护名称" prop="id">
        <el-input v-model="pg.id"></el-input>
      </el-form-item>
<!--      <el-form-item label="保护类型" prop="protectionType">-->
<!--        <el-radio-group v-model="pg.protectionType">-->
<!--          <el-radio label="SNCP1+1"></el-radio>-->
<!--          <el-radio label="OCH1+1"></el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      <el-form-item label="倒换类型" prop="switchType">
        <el-select v-model="pg.switchType" clearable placeholder="请选择倒换类型">
          <el-option label="单端倒换" value="UNI_SWITCH"></el-option>
          <el-option label="双端倒换" value="BI_SWITCH"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主用端口" prop="primaryPort">

        <el-select v-model="pg.primaryPort" clearable placeholder="请选择主用端口">
          <el-option value="端口1"></el-option>
          <el-option value="端口2"></el-option>
          <el-option value="端口3"></el-option>
          <el-option value="端口4"></el-option>
        </el-select>
<!--        <el-cascader
            v-model="pg.primaryPort"
            :options="options"
            @change="handleChange"></el-cascader>-->
            <!--:props="{ expandTrigger: 'hover' }"-->
        <!--      <el-input v-model="pg.primaryPort" placeholder="CTP/PTP"></el-input>-->
      </el-form-item>
      <el-form-item label="备用端口" prop="secondaryPort">
        <el-select v-model="pg.secondaryPort" clearable placeholder="请选择备用端口">
          <el-option value="端口1"></el-option>
          <el-option value="端口2"></el-option>
          <el-option value="端口3"></el-option>
          <el-option value="端口4"></el-option>
        </el-select>
<!--        <el-input v-model="pg.secondaryPort" placeholder="CTP/PTP"></el-input>-->
      </el-form-item>
      <el-form-item label="延迟时间" prop="holdOffTime">
        <el-input v-model="pg.holdOffTime" placeholder="延迟倒换时间">
          <i slot="suffix" style="margin-right: 10px">ms</i>
        </el-input>
      </el-form-item>
      <el-form-item label="返回模式" prop="mode">
        <el-select v-model="pg.mode" clearable placeholder="请选择返回模式，默认返回">
          <el-option label="返回" value="RETURN"></el-option>
          <el-option label="非返回" value="NON_RETURN"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <div style="float: right">
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="resetForm('pgForm')">取消</el-button>
        </div>

<!--        <el-button @click="resetForm('pgForm')">重置</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "PGConfig",
  data() {
    return {
      pg: {
        id: '',
        protectionType: 'OCH1+1',
        switchType: '',
        primaryPort: '',
        secondaryPort: '',
        holdOffTime: '',
        mode: ''
      },
      rules: {
        id: [
          {required: true, message: '请输入保护组名称', trigger: 'blur'},
          {type: 'number', message: '保护id必须为数字值，且最大65535',trigger: 'blur'}
        ],
        protectionType: [
          {required: true, message: '请选择保护类型', trigger: 'change'}
        ],
        switchType: [
          {required: true, message: '请选择倒换类型', trigger: 'change'}
        ],
        primaryPort: [
          {required: true, message: '请输入主用端口名称'},
        ],
        secondaryPort: [
          {required: true, message: '请输入备用端口名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        type: [
          {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
        ],
        holdOffTime: [
          {required: true, message: '请输入延迟时间', trigger: 'blur'},
          {type: 'number', message: '延迟时间必须为数字值'}
        ]
      },
      options: [
          {
        value: '1',
        label: 'CTP-1',
        children: [{
            value: 'P1',
            label: 'PTP-1-1'
          },
          {
            value: 'P2',
            label: 'PTP-1-2'
          },
          {
            value: 'P3',
            label: 'PTP-1-3'
          }]
        },
        {
          value: '2',
          label: 'CTP-2',
          children: [
            {
              value: 'P1',
              label: 'PTP-2-1'
            },
            {
              value: 'P2',
              label: 'PTP-2-2'
            }, {
              value: 'P3',
              label: 'PTP-2-3'
            }]
        },
        {
          value: '3',
          label: 'CTP-3',
          children: [{
              value: 'P1',
              label: 'PTP-3-1'
            },
            {
              value: 'P2',
              label: 'PTP-3-2'
            },
            {
              value: 'P3',
              label: 'PTP-3-3'
            }]
        }]
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$bus.$emit('pg:config:visible',false);
    },
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style>
.config_div {
  width: 300px;
  height: auto;
  float: left;
  /*padding-right: 6px;*/
  margin-left: 3px;
  border: 1px solid #0038f5;
}
.create_pg_div{
  width: 300px;
  height: auto;
}
.config_form {
  margin-top: 6px;
}

</style>